import React ,{useState,useEffect}from 'react';
import jpeg from './item.jpg';
import jpeg1 from './item1.jpg';
import './index.swiper.css';

function Swiper() {
    const [left,setLeft] = useState(0)
    let timer = null;
    useEffect(()=> {
        interval()
        return ()=> {
            if(timer) {
                clearInterval(timer)
            }
        }
    },[left])
    const interval = function() {
        if(!timer) {
            timer = setInterval(()=> {
                if(left + 1338 == 446) {
                    setLeft(0);
                    return;
                }
                setLeft(0)
            },3000)
        }
    };
    return (
        <div className="swiper">
            <div className="swiper_box" style={{
                "marginLeft":`${left}px`
            }}> 
                
                <div className='swiper_item'>
                    <img src={jpeg} alt="jpeg"/>
                    <div className="page_size">
                        <span>
                            盐城市机器人学会热烈祝贺第二届盐城市赛顺利落幕
                        </span>
                    </div>
                </div>
                <div className='swiper_item'>
                    <img src={jpeg1} alt="jpeg"/>
                    <div className="page_size"></div>
                </div>
                <div className='swiper_item'>
                    <img src={jpeg} alt="jpeg"/>
                    <div className="page_size"></div>
                </div>
            </div>
            <div className="foucs">
                <span className={left == 0 ? 'current' : ''} onClick={()=>setLeft(0)}></span>
                <span className={left + 446 == 0 ? 'current' : ''} onClick={()=>setLeft(-446)}></span>
                <span className={left + 892 == 0 ? 'current' : ''} onClick={()=>setLeft(-892)}></span>
             </div>
        </div>
    )
}

export default Swiper;